<template>
  <div>
    <input type="text" v-model="n"><br>
    <button @click="createArr">生成</button>
    <div class="row" v-if="arr.length" v-for="(item, index) in arr" :key="index">
      <div class="column" :class="selectItem.some(e=>e==(String(index)+ind))?'select':''" v-for="(item, ind) in arr" :key="ind" @click="clickItem(index,ind)"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      n:'',
      arr:[],
      selectItem:[]
    }
  },
  methods:{
    createArr(){
      this.arr=[]
      for (let index = 0; index < this.n; index++) {
        this.arr.push(index)
      }
    },
    clickItem(row,column){
      let item = String(row)+column;
      let index = this.selectItem.indexOf(item)
      if( index === -1 ){
        this.selectItem.push(item)
        console.log(2)
      }else{
        console.log(1)
        this.selectItem.splice(index,1)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.row{
  overflow: hidden;
  margin-bottom: 5px;
}
.column{
  float: left;
  border: 1px solid #000;
  height: 50px;
  width: 50px;
  margin-right: 5px;
}
.column:hover{
  background: red;
}
.column.select{
  background: blue;
}
</style>
